<!-- 受试者费用申请列表 -->
<template>
  <a-card :bordered="false">
    <s-table
      ref="table"
      size="default"
      :rowKey="record => record.id"
      :columns="$auth('PROJECT.PROJECT_FEE_PATIENT_LIST') ? columns : []"
      :scroll="{ x: 'max-content',y:500 }"
      :data="loadData"
    >
      <template slot="title">
        <a-descriptions :title="$t('all.autotext1635')" />
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="6" :sm="24">
                <a-form-item :label="$t('all.autotext1498')">
                  <a-select
                    v-model="queryParam.status"
                    :placeholder="$t('all.autotext1348')"
                    allowClear
                    show-search
                  >
                    <!-- APPLY_QUERY_STATUS -->
                    <a-select-option v-for="item in $const.EXAMINE_TYPE" :key="item.value" :value="item.value">
                      {{
                        item.desc
                      }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item :label="$t('all.autotext446')">
                  <a-input v-model="queryParam.ptsNo" :placeholder="$t('all.autotext1371')" />
                </a-form-item>
              </a-col>
              <a-col class="noshrink" :md="6" :sm="24">
                <a-form-item :label="$t('all.autotext949')">
                  <a-select
                    v-model="queryParam.orgId"
                    allowClear
                    :placeholder="$t('all.autotext1348')"
                    option-filter-prop="children"
                    show-search
                    filter
                  >
                    <a-select-option v-for="item in allCenterList" :key="item.id" :value="item.id">
                      {{
                        `${item.researchCenterNo} - ${item.orgName}`
                      }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="18" :sm="24" v-show="advanced">
                <a-form-model-item :label="$t('all.autotext17')" labelAlign="left">
                  <a-range-picker
                    @change="handleSelectDate"
                    v-model="queryDate"
                    allowClear
                    format="YYYY-MM-DD HH:mm:ss"
                    :show-time="true"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <span
                  class="table-page-search-submitButtons"
                  :style="(advanced && { overflow: 'hidden' }) || {}"
                >
                  <a-button type="primary" @click="$refs.table.refresh(true)">{{ $t('all.autotext30') }}</a-button>
                  <a-button style="margin-left: 8px;" @click="reset">{{ $t('all.autotext340') }}</a-button>
                  <a @click="toggleAdvanced" style="margin-left: 8px;">
                    {{ advanced ? $t('all.autotext760.1') : $t('all.autotext760.2') }}
                    <a-icon :type="advanced ? 'up' : 'down'" />
                  </a>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div>
          <a-button
            v-if="$auth('PROJECT.PROJECT_FEE_PATIENT_COMMIT')"
            @click="addApply"
            type="primary"
            icon="plus"
            style="margin-bottom: 25px;"
            :disabled="$store.state.user.project.status === 3"
          >
            {{ $t('all.autotext620') }}
          </a-button>
          <a-button
            v-if="$auth('PROJECT.PROJECT_FEE_PATIENT_EXPORT')"
            @click="handleExport(queryParam)"
            type="primary"
            style="margin-left: 8px;"
            :loading="exportLoading"
          >
            {{ $t('all.autotext1014') }}
          </a-button>
        </div>
      </template>
      <template slot="id" slot-scope="text, record, index">
        {{ index | getPageIndex($refs.table) }}
      </template>
      <template slot="applyReason" slot-scope="text">
        <span class="textover" :title="text">{{ text }}</span>
      </template>
      <template slot="createTime" slot-scope="text, record">
        {{ record.createTime | moment() }}
      </template>
      <template slot="status" slot-scope="text, record">
        {{ record.status | enumValueByKey($const.EXAMINE_TYPE) }}
      </template>
      <template slot="operation" slot-scope="text, record">
        <a-space size="large">
          <a
            v-if="$auth('PROJECT_FEE.PROJECT_FEE_PATIENT_DETAIL')"
            @click="clickView(record)"
          >{{ $t('all.autotext568') }}</a>
          <a
            v-if="canBack(record)"
            @click="clickBack(record)"
          >{{ $t('all.autotext303') }}</a>
        </a-space>
      </template>
    </s-table>
  </a-card>
</template>
<script>


import { buildPaginationObj } from '@/components/Table'
import { getCostList, revoke, apiGetAllCenter } from '@/api/cost/cost'
import { APPLY_QUERY_STATUS } from '@/constants/common'
import ExpenseExportMixin from '@views/cost-apply/mixins/expense-export-mixin'
import { getApprovalDetail } from '@/api/overview/approval'


export default {
  mixins: [ExpenseExportMixin],
  components: {},
  data () {
    return {
      proId: '',
      approval: {},
      allCenterList: [],
      queryParam: {
        type: 2,
        orgId: '' // 实际上是 researchId，只不过接口参数 key 用的 orgId
      },
      queryDate: [],
      loadData: parameter => {
        if (this.$auth('PROJECT.PROJECT_FEE_PATIENT_LIST')) {
          if (this.proId) {
            return getCostList(Object.assign(parameter, this.queryParam, { proId: this.proId }))
              .then(res => {
                return res
              })
              .catch(() => {})
          }
        } else {
          return Promise.resolve(buildPaginationObj([]))
        }
      },
      APPLY_QUERY_STATUS: APPLY_QUERY_STATUS.slice(1),
      advanced: false,
      columns: [
        {
          title: this.$t('all.autotext334'),
          key: 'id',
          dataIndex: 'id',
          width: 80,
          scopedSlots: { customRender: 'id' }
        },
        {
          title: this.$t('all.autotext1156'),
          key: 'applyNo',
          width: 160,
          dataIndex: 'applyNo'
        },
        {
          title: this.$t('all.autotext949'),
          width: 240,
          key: 'researchCenterNo',
          customRender: (text, record) => (`${record.researchCenterNo} - ${record.orgName}`)
        },
        {
          title: this.$t('all.autotext1357'),
          dataIndex: 'ptsNo',
          width: 150,
          customRender: (text, record) => {
            return `${record.roleName} - ${record.ptsNo}`
          }
        },
        {
          title: this.$t('all.autotext550'),
          key: 'applyReason',
          dataIndex: 'applyReason',
          width: 400,
          scopedSlots: { customRender: 'applyReason' }
        },
        {
          title: this.$t('all.autotext867'),
          key: 'totalAmount',
          width: 150,
          dataIndex: 'totalAmount',
          customRender: (text, record) => {
            return `${this.$t('money.unit')}${record.totalAmount}`
          }
        },
        {
          title: this.$t('all.autotext244'),
          key: 'createTime',
          width: 150,
          dataIndex: 'createTime',
          scopedSlots: { customRender: 'createTime' }
        },
        {
          title: this.$t('all.autotext1466'),
          key: 'status',
          width: 100,
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: this.$t('all.autotext187'),
          dataIndex: 'operation',
          width: 120,
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ]
    }
  },
  created () {
    const pro = localStorage.getItem('CURRENT_PROID')
    if (pro) {
      this.proId = parseInt(pro)
    }
  },
  mounted () {
    this.initApproval()
    this.getAllCenterList()
    this.$globalVue.$on('approvalCostUpdate', () => this.$refs.table.loadData())
  },
  destroyed () {
    this.$globalVue.$off('approvalCostUpdate')
  },
  methods: {
    // 获取审批流详情
    async initApproval () {
      const proId = this.proId
      if (!this.$auth('PROJECT.PROJECT_FEE_PATIENT_COMMIT')) return
      if (this.$auth('PROJECT.PROJECT_FEE') && this.$auth('PROJECT.PROJECT_FEE_PATIENT')) {
        this.approval = await getApprovalDetail({
          proId,
          type: 2
        })
      }
    },
    // 获取所有中心下拉列表
    getAllCenterList () {
      apiGetAllCenter({ proId: this.proId }).then(res => {
        this.allCenterList = res
      })
    },
    // 点击展开 详细搜索信息
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    // 点击重置
    reset () {
      this.queryParam = { type: 2, orgId: '' }
      this.queryDate = []
      this.$refs.table.refresh(true)
    },
    // 点击新增
    addApply () {
      if (!this.approval) return this.$message.warning(this.$t('all.autotext153'))
      this.$router.push({
        name: 'AddSubject',
        query: {
          pname: this.$store.state.user.project.name,
          id: this.proId
        }
      })
    },
    // 点击查看
    clickView (record) {
      this.$router.push({ name: 'ApplyDetail', query: { id: record.id, status: record.status } })
    },
    clickBack (record) {
      const that = this
      this.$confirm({
        title: this.$t('all.autotext964'),
        onOk () {
          revoke({
            id: record.id
          }).then(res => {
            that.$message.success(that.$t('all.autotext1426'))
            that.$refs.table.refresh(true)
          })
        }
      })
    },
    // 处理发起日期选择框改变时产生的回调
    handleSelectDate (date, dateString) {
      this.queryDate = date
      this.queryParam.applyStartTime = dateString[0]
      this.queryParam.applyEndTime = dateString[1]
    },
    // 是否可撤回
    canBack(record) {
      return (this.$store.getters.userInfo.id === record.createrId || record.extraInfo?.includes(this.$store.getters.userInfo.id)) && (record.status === 30 || record.allowWithdraw === '1')
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-table-title{
  padding-top: 0px !important;
}

.textover {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
